<template>
  <div>
    <div class="collect">
      <van-row>
        <van-col span="20">
          <van-search
            v-model="value"
            placeholder="搜索我的收藏"
            class="search"
          />
        </van-col>
        <van-col span="4">
          <img src="../assets/yuanbao.png" alt="" class="yuanbao" />
        </van-col>
      </van-row>

      <h2 class="shoucangji">收藏集</h2>
      <van-row class="menuList">
        <van-col span="12">
          <img
            src="http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg"
            alt=""
            class="menuImg"
          />
        </van-col>
        <van-col span="10" class="desc">
          <h2>川香辣子鸡</h2>
          <span>2人做过</span>
          <div class="imgName">
            <img alt="" :src="authorimg" class="authorimg" />
            <span class="name">朽木白哉</span>
          </div>
        </van-col>
        <!-- 点击收藏,弹框 -->
        <van-col>
          <img
            src="../assets/more_shu.png"
            alt=""
            class="more"
            @click="showMore = true"
          />
        </van-col>
      </van-row>

      <!-- 弹框区域,使用遮罩层-->
      <van-overlay :show="showMore" @click="showMore = false" z-index="100">
        <div class="dialog" @click.stop>
          <h3 class="more">更多</h3>
          <div class="dialog_item">
            <div>提醒我做这道菜</div>
          </div>
          <div class="dialog_item">
            <div>上传我做的这道菜</div>
          </div>
          <div
            class="dialog_item"
            @click="(showShare = true), (showMore = false)"
          >
            <div class="share">分享作品</div>
          </div>
          <div class="dialog_item">
            <div class="remove" @click="remove()">从收藏夹移除</div>
          </div>
          <div class="dialog_item">
            <div class="cancel" @click="cancel()">取消</div>
          </div>
        </div>
      </van-overlay>

      <van-share-sheet v-model="showShare" title="" :options="options" />

    </div>

    <!-- 底部标签栏 -->
    <my-tabbar></my-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      menuImg: [
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
      ],
      authorimg: "https://img01.yzcdn.cn/vant/cat.jpeg",
      //中部弹出更多弹框
      showMore: false,

      //底部弹出分享作品面板
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    cancel() {
      this.showMore = false;
    },
    remove(){}
  },
};
</script>

<style lang="scss" >
.collect {
  padding: 0 0.4rem;
  .van-search__content {
    background-color: #f3f3ecdc;
    border-radius: 7px;
    margin-top: -0.3rem;
  }
  .yuanbao {
    width: 30px;
    margin: 0.7rem;
  }
  .shoucangji {
    margin: 0.6rem;
  }
  .menuList {
    margin: 1rem 0.5rem;
    height: 150px;
    img {
      height: 150px;
      width: 90%;
      border-radius: 10px;
    }
    .desc {
      margin-top: 2rem;
      h2 {
        font-weight: 600;
        font-family: "微软雅黑";
        margin-bottom: 0.8rem;
      }
      span {
        font-size: 14px;
        margin-left: 0.2rem;
      }
      .imgName {
        margin-top: 1rem;
        .authorimg {
          width: 1.6rem;
          height: 1.6rem;
          border-radius: 0.8rem;
          margin-right: 0.5rem;
        }
      }
    }
    .more {
      width: 20px;
      height: 20px;
      margin-top: 70px;
    }
  }
  //弹框区域
  .dialog {
    //实现块级元素居中显示
    position: absolute;
    width: 340px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -140px; //高度的一半
    margin-left: -170px; //宽度的一半
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
    h3 {
      height: 8vh;
      font-size: 18px;
    }
    .dialog_item {
      height: 6vh;
      .cancel {
        color: red;
        font-size: 14px;
        margin-left: 70vw;
      }
    }
  }
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.4); //修改遮罩层的背景色
  }
}
</style>